<template>
  <a-card>
    <search-form :loading="loading" @search="toQuery" :downloadLoading="downloadLoading" @download="toExport2" v-slot="{}">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-form-item label="用戶名" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-input v-decorator="['PQ_name_LIKE']" placeholder="请输入" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="昵称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-input v-decorator="['PQ_nickname_LIKE']" placeholder="请输入" />
          </a-form-item>
        </a-col>
      </a-row>
    </search-form>
    <div class="table-operations">
      <a-button type="primary" @click="onAdd">新建</a-button>
    </div>
    <a-table bordered size="middle" :loading="loading" :columns="columns" :rowKey="(record) => record.id" :dataSource="data" @change="handleTableChange" :pagination="pagination">
      <template v-slot:avatarUrl="avatarUrl">
        <div v-viewer v-if="avatarUrl">
          <img style="height: 21px" :src="avatarUrl" />
        </div>
      </template>

      <!-- table-row-operatiin -->
      <template v-slot:operation="record">
        <div class="table-row-operations">
          <a href="javascript:;" @click="onEdit(record)">修改 </a>
          <a-popconfirm title="Sure to delete?" @confirm="() => onDelete(record)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
    <user-form ref="form" :is-add="isAdd" @refreshTable="init" />
  </a-card>
</template>
<script>
const columns = [
  {
    title: '用戶名',
    dataIndex: 'name',
    sorter: true
  },
  {
    title: '昵称',
    dataIndex: 'nickname',
    sorter: true
  },
  {
    title: '头像',
    dataIndex: 'avatarUrl',
    scopedSlots: { customRender: 'avatarUrl' }
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

import initData from '@/mixins/initData'
import permission from '@/directive/permission' // 权限判断指令
import SearchForm from '@/components/tool/SearchForm'
import UserForm from './form'
import { get, del } from '@/api/user'

export default {
  name: 'User',
  components: { SearchForm, UserForm },
  directives: { permission },
  mixins: [initData],
  data() {
    return {
      columns
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  computed: {},
  methods: {
    beforeInit() {
      // ajax query
      this.url = 'oauth/user/page'
      this.params = { current: this.pagination.current, size: this.pagination.pageSize, sort: this.sort, ...this.query }
      return true
    },
    onAdd() {
      this.isAdd = true
      const _this = this.$refs['form']
      _this.getRoleSelect()
      _this.visible = true
    },
    async onEdit(record) {
      let res = await get(record.id)
      this.isAdd = false
      const _this = this.$refs['form']
      _this.getRoleSelect()
      _this.form = { ...res.data }
      _this.visible = true
    },
    async onDelete(record) {
      const key = 'delUser'
      try {
        this.$message.loading({ content: '正在删除...', key })
        let res = await del(record.id)
        this.$message.success({ content: '删除成功!', key, duration: 2 })
        this.init()
      } catch (err) {
        console.error(err.message)
      }
    }
  }
}
</script>
